<template>
  <!-- DCS数据点值归档 -->
  <div class="dcspointFiling">
    <basic-container>

      <!-- 自定义搜索功能 -->
      <div class="search-tools">

        <!-- 开始日期 -->
        <el-date-picker
          v-model="dateFrom"
          type="datetime"
          size="small"
          placeholder="开始日期"
          :picker-options="pickerOption"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <label class="search_label">至</label>

        <!-- 结束日期 -->
        <el-date-picker
          v-model="dateTo"
          type="datetime"
          size="small"
          placeholder="结束日期"
          :picker-options="pickerOption"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>

        <!-- 点位标签 -->
        <label class="search_label">点位标签</label>
        <el-input size="small" clearable v-model="siteLabel" placeholder="请输入点位标签"></el-input>

        <!-- 标签名称 -->
        <label class="search_label">标签名称</label>
        <el-input size="small" clearable v-model="siteName" placeholder="请输入标签名臣"></el-input>

        <!-- 是否超标 -->
        <label class="search_label">是否超标</label>
        <el-select size="small" v-model="dcsState" clearable>
          <el-option 
            v-for="(item, index) in dcsStateOption" 
            :key="index" 
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

      </div>

      <!-- 表格内容 -->
      <avue-crud 
        :option="option"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        :permission="permissionList"
        :before-open="beforeOpen"
        v-model="form"
        ref="crud"
        @current-change="currentChange"
        @size-change="sizeChange"
      >

        <!-- 按钮 -->
        <template slot="menuLeft">
          
          <!-- 查询 -->
          <el-button 
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="searchDcspoint">
            查 询
          </el-button>

          <!-- 清空 -->
          <el-button 
            size="small"
            icon="el-icon-delete"
            @click="resetSearch">
            清 空
          </el-button>
        </template>

        <!-- 自定义状态 -->
        <template slot="val" slot-scope="scope">
          <div v-if="scope.row['dcsState'] === '已超标'" style="color:red;">
            {{scope.row['val']}}
          </div>
          <div v-else>{{scope.row['val']}}</div>
        </template>
      </avue-crud>

    </basic-container>
  </div>
</template>

<script>
import {getStates, getList} from "@/api/configdb/dcspointFiling";
import {mapGetters} from "vuex";

export default {
  data() {

    // 定义一个时间格式化函数
    Date.prototype.format = function(format) {
      var o = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "h+": this.getHours(),
        "m+": this.getMinutes(), 
        "s+": this.getSeconds(), 
        "q+": Math.floor((this.getMonth() + 3) / 3),
        S: this.getMilliseconds() 
      };
      if (/(y+)/.test(format)) {
        format = format.replace(
          RegExp.$1,
          (this.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }

      return format;
    };

    return {
      pickerOption: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      allOption: {
        label: "全部",
        value: "all"
      },
      dateFrom: "",
      dateTo: "",
      siteLabel: "",
      siteName: "",
      dcsState: "",
      preDateFrom: "",
      preDateTo: "",
      preSiteLabel: "",
      preSiteName: "",
      preDcsState: "",
      dcsStateOption: [],
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: this.$pageSize,
        currentPage: 1,
        total: 0
      },
      option: {
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        viewBtn: true,
        selection: false,
        dialogClickModal: false,
        column: [
          {
            label: "点位标签",
            prop: "dwbq",
            align: "center"
          },
          {
            label: "点位名称",
            prop: "dwmc",
            align: "center"
          },
          {
            label: "值",
            prop: "val",
            align: "center",
            slot: true
          },
          {
            label: "单位",
            prop: "dw",
            align: "center"
          },
          {
            label: "拉取时间",
            prop: "createTime",
            align: "center"
          },
          {
            label: "是否超标",
            prop: "dcsState",
            align: "center"
          },
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission"]),

    // 表格按钮权限
    permissionList() {
      return {
        addBtn: false, //this.vaildData(this.permission.dcspointFiling_add, false),
        viewBtn: false, //this.vaildData(this.permission.dcspointFiling_view, false),
        delBtn: false, //this.vaildData(this.permission.dcspointFiling_delete, false),
        editBtn: false //this.vaildData(this.permission.dcspointFiling_edit, false)
      };
    }
  },
  watch: {

    // 开始日期
    dateFrom() {
      if (this.dateFrom) {
        let startDate = new Date(this.dateFrom);
        let endDate = new Date(this.dateTo);
        if (startDate.getTime() > endDate.getTime()) {
          this.dateTo = this.dateFrom;
        }
      }
    },
    
    // 结束日期
    dateTo() {
      if (this.dateTo) {
        let startDate = new Date(this.dateFrom);
        let endDate = new Date(this.dateTo);
        if (startDate.getTime() > endDate.getTime()) {
          this.dateFrom = this.dateTo;
        }
      }
    }

  },
  mounted() {
    this.getDcsStateType();
  },
  methods: {

    // 获取dcs数据点值状态列表
    getDcsStateType() {
      getStates().then(res => {
        if(res.data.success !== true) {
          return;
        }
        var resData = res.data.data;

        this.dcsStateOption = [this.allOption];

        resData.forEach(item => {
          this.dcsStateOption.push({
            label: item.dictValue,
            value: item.dictKey
          });
        });

        this.dcsState = this.allOption.value;
        this.preDcsState = this.dcsState;
      }).then(() => {
        this.onLoad(this.page);
      });
    },
    
    // 更换页码
    currentChange(currentPage){
      this.dateFrom = this.preDateFrom;
      this.dateTo = this.preDateTo;
      this.siteLabel = this.preSiteLabel;
      this.siteName = this.preSiteName;
      this.dcsState = this.preDcsState;
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },

    // 更换每页显示数量
    sizeChange(pageSize){
      this.dateFrom = this.preDateFrom;
      this.dateTo = this.preDateTo;
      this.siteLabel = this.preSiteLabel;
      this.siteName = this.preSiteName;
      this.dcsState = this.preDcsState;
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },

    // 点击查询按钮
    searchDcspoint() {
      this.preDateFrom = this.dateFrom;
      this.preDateTo = this.dateTo;
      this.preSiteLabel = this.siteLabel;
      this.preSiteName = this.siteName;
      this.preDcsState = this.dcsState;
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },

    // 点击清空按钮
    resetSearch() {
      this.dateFrom = "";
      this.dateTo = "";
      this.siteLabel = "";
      this.siteName = "";
      this.dcsState = this.allOption.value;
      this.preDateFrom = this.dateFrom;
      this.preDateTo = this.dateTo;
      this.preSiteLabel = this.siteLabel;
      this.preSiteName = this.siteName;
      this.preDcsState = this.dcsState;
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },

    // 获取表格内容
    onLoad(page) {
      this.loading = true;
      var query = {
        isFiled: 1,
        startTime: this.preDateFrom,
        endTime: this.preDateTo,
        dwbq: this.preSiteLabel,
        dwmc: this.preSiteName,
        dcsState: this.preDcsState === this.allOption.value ? "" : this.preDcsState
      };
      getList(page.currentPage, page.pageSize, query).then(res => {
        var resData = res.data.data;
        this.data = [];
        resData.records.forEach(item => {
          this.data.push({
            dwbq: item.dwbq,
            dwmc: item.dwmc,
            val: item.val,
            dw: item.dw,
            createTime: item.createTime,
            dcsState: item.dcsState === "1" ? "已超标" : "未超标"
          });
        });

        this.page.total = resData.total;
        this.loading = false;
      });
    }

  }
};
</script>

<style lang="scss">
.dcspointFiling {
  .el-card__body {
    padding: 10px !important;
  }

  .search_label {
    font-size: 14px;
    margin: 0px 10px;
  }

  .search-tools {
    margin-bottom: 10px;

    .el-input {
      width: 200px;
    }
  }
}
</style>